<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
        <style>
            body {
                background-color: #f0f0f0;
            }
            p {
                font-weight:300;
            }
            a,a:hover {
                text-decoration:none !important;
                color:#626976;
            }
            .content {
                padding:3rem 0;
            }
            .container {
                color:#626976;
                position: relative;
            }

            h2 {
                font-size:20px;
            }
            .custom-table {
                min-width:900px;
            }
            .custom-table thead tr,.custom-table thead th {
                padding-bottom:30px;
                color:#000;
            }
            .custom-table tbody th,.custom-table tbody td {
                color:#777;
                font-weight:400;
                padding-bottom:20px;
                padding-top:20px;
                font-weight:300;
                border:none;
            }
            .yellow {
                color: rgb(255, 162, 0);
            }
            .blue {
                color: rgb(75, 107, 251);
            }
            .purple {
                color: rgb(242, 40, 242);
            }
        </style>
        <title>Gacha Records</title>
        <!-- This file could be generated automatically using `java -jar grasscutter.jar -gachamap` -->
        <!-- You can also modify the file manually to customize it -->
        <!-- Otherwise you may onle see number IDs in the gacha record -->
        <script type="text/javascript" src="/gacha/mappings"></script>
        <script>
            records = {{REPLACE_RECORDS}};
            maxPage = {{REPLACE_MAXPAGE}};

            mappings['default'] = mappings['en-us']; // make en-us as default/fallback option
        </script>
    </head>
    <body>
        <div class="content">
            <div class="container">
                <h2 class="mb-5">{{TITLE}}</h2>
                <table id="container" class="table table-striped custom-table">
                    <thead>
                        <tr>
                            <th scope="col">{{DATE}}</th>
                            <th scope="col">{{ITEM}}</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <div class="navbar">
                    <a href="" id="prev">&lt;&lt;&lt;</a>
                    <span id="curpage">1</span>
                    <a href="" id="next">&gt;&gt;&gt;</a>
                </div>
            </div>
        </div>
        <footer>
            <div class="copyright">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <span>
                                Template by BecodReyes. All rights reserved.
                            </span>
                        </div>
                        <div class="col-md-6">
                            <ul style="float:right">
                                <li class="list-inline-item">
                                    <a href="https://github.com/Grasscutters/Grasscutter">Github</a>
                                </li>
                                <li class="list-inline-item">·</li>
                                <li class="list-inline-item">
                                    <a href="https://github.com/Grasscutters/Grasscutter/blob/stable/LICENSE">License</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

        <script>
            var lang = "{{LANGUAGE}}".toLowerCase();

            function itemMapper(itemID) {
                if (mappings[lang] != null && mappings[lang][itemID] != null) {
                    var entry = mappings[lang][itemID];
                    if (entry){
                        return "<span class='" + entry[1] + "'>" + entry[0] + "</span>";
                    }
                } else {
                    if (mappings['default'][itemID] != null) {
                        var entry = mappings['default'][itemID];
                        if (entry){
                            return "<span class='" + entry[1] + "'>" + entry[0] + "</span>";
                        }
                    }
                }
                return "<span class='blue'>" + itemID + "</span>";
            }

            (function (){
                var container = document.getElementById("container");
                records.forEach(element => {
                    var e = document.createElement("tr");
                    
                    e.innerHTML= "<td>" + (new Date(element.time).toLocaleString(lang)) + "</td><td>" + itemMapper(element.item) + "</td>";
                    container.appendChild(e);
                });

                // setup pagenation buttons
                var page = parseInt(new window.URLSearchParams(window.location.search).get("p"));
                if (!page) {
                    page = 0;
                }
                document.getElementById("curpage").innerText = page + 1;
                var href = new URL(window.location);
                href.searchParams.set("p", page - 1);
                document.getElementById("prev").href = href.toString();
                href.searchParams.set("p", page + 1);
                document.getElementById("next").href = href.toString();
                if (page <= 0) {
                    document.getElementById("prev").style.display = "none";
                }
                if (page >= maxPage - 1) {
                    document.getElementById("next").style.display = "none";
                }

                // setup gacha type info
                var gachaType = new window.URLSearchParams(window.location.search).get("gachaType");
                if (mappings[lang] != null && mappings[lang][gachaType] != null) {
                    var gachaString = mappings[lang][gachaType];
                } else {
                    var gachaString = mappings['default'][gachaType];
                    if (gachaString == null) {
                        gachaString = gachaType;
                    }
                }
                document.getElementById("gacha-type").innerText = gachaString;
        })();
        </script>

    </body>
</html>
